<template>
  <div class="SecondTopicSetting">
    <div class="ele-title">
      <h3>魔方展示二</h3>
    </div>
    <div class="content">
      <el-form ref="topicForm" :model="topicForm" :rules="rules" label-width="50px" label-position="left">
        <el-form-item label="标题" prop="title">
          <el-col :span="24">
            <el-input v-model="topicForm.title" placeholder="输入标题" maxlength="4" />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="24">
            <el-alert
              title="最多只能输入4个文字。"
              type="info"
              :closable="false"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="小标">
          <el-col :span="24">
            <el-input v-model="topicForm.subTitle" placeholder="输入小标" maxlength="6" />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="24">
            <el-alert
              title="最多只能输入6个文字。"
              type="info"
              :closable="false"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="图片" required>
          <el-col :span="24">
            <el-card>
              <el-col :span="6">
                <sku-img v-model="topicForm.url" />
              </el-col>
              <el-col :span="18">
                <el-form-item label="标题" prop="picTitle">
                  <el-input v-model="topicForm.picTitle" placeholder="输入名称" />
                </el-form-item>
              </el-col>
            </el-card>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="24">
            <el-alert
              title="建议图片尺寸300x150像素。"
              type="info"
              :closable="false"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="商品" required>
          <el-card>
            <el-row :span="24" type="flex" justify="start">
              <div v-for="(item,index) in list" :key="index" class="goodsBox">
                <el-image :src="item.img" :fit="'cover'" style="width: 100px;height: 100px" />
                <el-button type="danger" circle class="el-icon-close delete" @click="list.splice(index,1)" />
              </div>
              <div v-if="list.length<30" class="goodsBox">
                <div class="addUpload" @click="addGoodsDialog">
                  <i class="el-icon-plus" style="line-height: 100px;font-size: 30px" />
                </div>
              </div>
            </el-row>
          </el-card>
        </el-form-item>
        <el-form-item>
          <el-col :span="24">
            <el-alert
              title="最多只能添加30个商品。"
              type="info"
              :closable="false"
            />
          </el-col>
        </el-form-item>
      </el-form>
    </div>
    <SelectAllGoodsDialog ref="selectGoodsDialog" @select="onSelectGoods" />
  </div>
</template>

<script>
/** 商品 tabs */
import { addTopic, getTopic } from '@/api/customAPI/shop/homeSetting'
import SkuImg from '@/components/SkuImg'
import SelectAllGoodsDialog from '@/components/SelectAllGoodsDialog'
export default {
  name: 'SecondTopicSetting',
  components: {
    SkuImg,
    SelectAllGoodsDialog
  },

  data() {
    return {
      model: null,
      list: [],
      topicForm: {
        title: null,
        subTitle: null,
        picTitle: null,
        url: null,
        goodsIds: []
      },
      rules: {
        title: [{
          required: true, message: '请输入标题', trigger: 'blur'
        }],
        picTitle: [{
          required: true, message: '请输入图片标题', trigger: 'blur'
        }]
      }
    }
  },
  created() {

  },
  methods: {
    setModel(model) {
      this.model = parseInt(model)
      getTopic({ type: '2' }).then(res => {
        if (res.data.data) {
          this.topicForm.title = res.data.data.title
          this.topicForm.subTitle = res.data.data.subTitle
          this.topicForm.url = res.data.data.url
          this.topicForm.picTitle = res.data.data.picTitle
          this.topicForm.goodsIds = res.data.data.goodsList.map(item => item.goodsId)
          console.log(res.data.data)
          this.list = res.data.data.goodsList
        }
      })
    },
    addGoodsDialog() {
      if (this.list.length > 0) {
        this.$refs.selectGoodsDialog.setSelectList(this.list)
      }
      this.$refs.selectGoodsDialog.show()
    },
    onSelectGoods(goods) {
      console.log(goods)
      if (goods.length > 0) {
        this.list = goods
      }
    },
    submitSecondTopic() {
      this.$refs.topicForm.validate(validate => {
        if (validate) {
          if (!this.topicForm.url) {
            return this.$message.error('请上传图片')
          } else {
            const data = {
              type: 2,
              title: this.topicForm.title,
              subTitle: this.topicForm.subTitle,
              url: this.topicForm.url,
              picTitle: this.topicForm.picTitle,
              goodsIds: []
            }
            if (this.list.length == 0) {
              this.$message.error('请选择商品')
            } else {
              this.list.forEach(item => {
                data.goodsIds.push(item.goodsId)
              })
            }
            addTopic(data).then(res => {
              this.$message.success('修改魔方二成功')
            })
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.SecondTopicSetting {
  .goodsBox {
    margin-bottom: 22px;
    position: relative;
    left: 0;
    top: 0;
    margin-right: 10px;
    .addUpload {
      width: 100px;
      height: 100px;
      border: 1px solid #EBEBEB;
      text-align: center;
    }
    .delete {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
</style>
